<template>
	<div id="tmpl">
	<div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in list">
		           <router-link v-bind="{to:'./goodsinfo/'+item.id}">
		                <img class="mui-media-object" :src="item.img_url">
		                <div class="mui-media-body">{{item.title}}</div>
		                <div class="des">
		                	<p>
		                		<span>￥{{item.sell_price}}</span>
		                		<s>￥{{item.market_price}}</s>
		                	</p>
		                	<p>
		                		<h6 class="left">热卖中</h6>
		                		<h6 class="right">剩余库存:{{item.stock_quantity}}件</h6>
		                	</p>
		                </div>
		            </router-link>
		        </li>
		    </ul>    
		</div>
       <mt-button type="primary" size="large" @click="getmore">加载更多</mt-button>
	</div>
</template>

<script>
	 import commen from "../../kits/commen.js";
	export default{
		data(){
    		return{
    			list:[],
    			page:1,
    		}
    		
    	},
    	created(){
    		this.getlist();
    	},
    	methods:{
    		getlist(page){
    			page=page||1;
    			var url=commen.apidomain+"/api/getgoods?pageindex="+page;
    			this.$http.get(url).then(function(response){
    				var data=response.body;
    				if(data.status!=0){
    					Toast(data.message);
    					return;
    				}
    				if(data.message.length<=0){
    					return;
    				}
    				this.list=this.list.concat(data.message);
    			})
    		},
    		getmore(){
    			this.page++;
    			this.getlist(this.page);
    		}
    	}
	}
</script>

<style scoped>
	.mui-content li{
		border: 1px solid blueviolet;
		box-shadow: 0 0 4px #000;
		margin-left: 4px;
		padding-left: 0px;
	}
	.mui-content a{
		padding-left: 0px;
		
	}
	.des{
		padding: 6px;
		margin-top: 10px;
		height: 60px;
		background-color: rgba(0,0,0,0.1);
		text-align: left;
	}
	.des span{
		color:red;
		margin-right: 15px;
	}
	.des .right{
		position: absolute;
		bottom: 0;
		right: 10px;
	}
	.des .left{
		position: absolute;
		bottom: 0;
		left: 10px;
	}
</style>